<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
 <head>
  	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
    <link href="static/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
    <link href="static/themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="static/js/plugins/sortable.js" type="text/javascript"></script>
    <script src="static/js/fileinput.js" type="text/javascript"></script>
    <script src="static/js/locales/fr.js" type="text/javascript"></script>
    <script src="static/js/locales/es.js" type="text/javascript"></script>
    <script src="static/themes/fas/theme.js" type="text/javascript"></script>
    <script src="static/themes/explorer-fas/theme.js" type="text/javascript"></script>
  <script type="text/javascript" src="static/js/locales/zh.js"></script>

  <script type="text/javascript">
      $(function () {
          initFileInput("input-id");
      })

      function initFileInput(ctrlName) {
          var control = $('#' + ctrlName);
          control.fileinput({
              language: 'zh', //设置语言
              uploadUrl: "${pageContext.request.contextPath }/upload", //上传的地址
              allowedFileExtensions: ['xls','xlsx','pdf','jpg', 'gif', 'png'],//接收的文件后缀
              //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
              uploadAsync: false, //默认异步上传
       //       uploadAsync: true, //默认异步上传
              showUpload: true, //是否显示上传按钮
              showRemove : true, //显示移除按钮
              showPreview : true, //是否显示预览
              showCaption: false,//是否显示标题
              browseClass: "btn btn-primary", //按钮样式
              dropZoneEnabled: true,//是否显示拖拽区域
              //minImageWidth: 50, //图片的最小宽度
              //minImageHeight: 50,//图片的最小高度
              //maxImageWidth: 1000,//图片的最大宽度
              //maxImageHeight: 1000,//图片的最大高度
              //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
              //minFileCount: 0,
              //maxFileCount: 10, //表示允许同时上传的最大文件个数
              enctype: 'multipart/form-data',
              validateInitialCount:true,
              previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
              msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
              uploadExtraData: {
                  "username":'xiaoming' //参数
              }
          }).on('filepreupload', function() {     //上传中
              console.log('文件正在上传');
          }).on("fileuploaded", function (event, data,previewId, index) {    //一个文件上传成功
              console.log(data.response.obj.url);
              console.log(data.response.obj.name);
          }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
              console.log('文件上传失败！'+data.id);


          })
      }
  </script>
</head>
 <body style="overflow-x: hidden">
 <div class="container-fluid">
   <div class="row form-group">
    <label class="col-md-4">附件上传:</label>
    <div class="col-sm-12">
     <input id="input-id" name="uploadfile" multiple type="file" data-show-caption="true">
    </div>
   </div>
 </div>
  <%--<table cellpadding="0" cellspacing="1" class="formtable">
  <input id="documentTitle" type="hidden" name="documentTitle" value="blank"/>
  <input id="fileUrl" type="hidden"/>
  <input id="fileName" type="hidden"/>
  <input id="swfpath" type="hidden">
   <tbody>
    <tr>
     <td align="right">
       <label class="Validform_label"></label>
     </td>
     <td class="value">
      <t:upload name="instruction" dialog="false" multi="true" extend="" queueID="instructionfile" view="false" auto="true" uploader="cgUploadController.do?ajaxSaveFile" onUploadSuccess="uploadSuccess"  id="instruction" formData="documentTitle"></t:upload>
     </td>
    </tr>
    <tr>
     <td colspan="2" id="instructionfile" class="value">
     </td>
    </tr>
   </tbody>
  </table>--%>
   <div id="fileShow" >
  </div>
 </body>
 </html>
